<template>
  <div @click="visible = true" class="modalcantainer">
    <slot>
      <a-input
        v-model="inputValue"
        :disabled="disabled"
        placeholder="请选择设备"
      />
    </slot>
    <div class="mask" v-if="!disabled" @click="visible = true" />
  </div>
  <a-modal title="选择设备" v-model:visible="visible" :width="1000">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <a-space>
      <a-input-search
        search-button
        v-model="searchForm.deviceName"
        :style="{ width: '220px' }"
        placeholder="设备名称"
        @search="Search"
      />
    </a-space>
    <div style="height: 20px" />
    <tableTurn :tableData="getPage" ref="tableRef">
      <a-table-column
        v-for="header in headers"
        :key="header.name"
        :width="header.width || 200"
        :title="header.name"
        :data-index="header.code"
        align="center"
      >
        <!-- <template #cell="{ record }" v-if="!header.code">
              <template v-if="header.name === '标准用量'">
                <a-input-number :min="1" v-model="record.dosage" disabled hide-button />
              </template>
            </template> -->
      </a-table-column>
      <a-table-column :width="80" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-space>
            <a-link @click="choice(record)"> 选择 </a-link>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue';
  import { TWorkshop } from '@/api/FactoryModeling/type';
  import { GetEquipmentList } from '@/api/equipment-management/equipment-list';

  let props = withDefaults(
    //参数说明
    defineProps<{
      disabled?: boolean;
      workshopld?: number;
    }>(),
    {
      disabled: false,
    }
  );
  let inputValue = ref('');
  let searchForm = reactive<any>({
    state: 2,
  });
  const getPage = async (page: any) => {
    try {
      let res = await GetEquipmentList({
        ...page,
        ...searchForm,
        workshopld: props.workshopld || undefined,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      return Promise.resolve();
    }
  };

  let visible = ref(false);

  const tableRef = ref();
  const Search = () => {
    tableRef.value.loadData();
  };

  watch(
    () => props.workshopld,
    () => Search()
  );
  let emit = defineEmits(['choice']);
  let choice = async (item: TWorkshop) => {
    emit('choice', item);
    inputValue.value = item.name || '';
    visible.value = false;
  };

  let headers = [
    {
      code: 'deviceCoding',
      name: '设备编码',
    },
    {
      code: 'deviceName',
      name: '设备名称',
    },
    {
      code: 'specification',
      name: '规格',
      width: 100,
    },
    {
      code: 'modelNumber',
      name: '型号',
      width: 100,
    },
  ];
</script>

<style scoped>
  .modalcantainer {
    position: relative;
    width: 100%;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
  }
</style>
